<!-- 首页V2 -->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swiper">
      <el-carousel height="500px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            :src="item.img"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 新闻 -->
    <el-row class="news wrap" :gutter="20">
      <el-col class="news-center" :span="16" :xs="24">
        <div class="news-cr-t">
          <div
            :class="newsIndex == index ? 'news-title-active' : 'news-title'"
            v-for="(item, index) in newsData"
            :key="index"
            @click="newsBtn(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="news-list">
          <div class="news-list-t">
            <div class="news-list-t-l"><img src="../assets/img/home/u16.png" alt=""></div>
            <div class="news-list-t-r" v-if="newsList.length > 0">
              <div class="cz1"><h4>{{newsList[0].title}}</h4></div>
              <div><h6>{{newsList[0].publishedAt}}</h6></div>
              <div class="cz2"><h6>{{newsList[0].subtitle}}</h6></div>
            </div>
          </div>
          <div class="news-b" v-if="newsList.length > 0">
            <div class="news-b-list cu" v-for="(item, index) in newsList.slice(1,5)" :key="index">
              <div class="news-b-list-l">
                <h4 v-if="item.publishedAt">{{ item.publishedAt.slice(8,10) }}</h4>
                <h6 v-if="item.publishedAt">{{ item.publishedAt.slice(2,7) }}</h6>
              </div>
              <div class="news-b-list-r">
                <h4 class="cz1">{{item.title}}</h4>
                <h6 class="cz1">{{item.subtitle}}</h6>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="news-left" :span="8" :xs="24">
        <div class="dl">
          <div class="news-l-r"></div>
          <div class="news-l-text">走进交建</div>
        </div>
        <div class="news-img"><img src="../assets/img/home/jiaojian.png"  alt=""  srcset=""/></div>
      </el-col>
    </el-row>
    <!-- 广告 -->
    <div class="bk">
      <div class="dl wrap">
        <div class="news-l-r"></div>
        <div class="news-l-text">业务板块</div>
      </div>
      <div class="public wrap" :gutter="20">
        <div class="column" ref="column">
          <div
            ref="columnList"
            class="column-list"
            :style="{ transform: 'translateX(' + offsetLeft + '%' }"
            @mouseenter="onScrollMouseenter"
            @mouseleave="onScrollMouseleave"
          >
            <div class="column-list-item" v-for="(item, index) in pageImg" :key="index">
              <img
                class="column-list-item-img"
                :src="item.img"
                alt=""
              />
              <div class="column-list-item-text">基础工程</div>
            </div>
          </div>
          <div class="column-list-left" @click="leftShift">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div class="column-list-right" @click="rightShift">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { get } from "../api";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: "Home",
  data() {
    return {
      getWidth: '',
      bannerList: [
        {img: require('../assets/img/home/u13.png'), name: '杭州火车东站'},
        {img: require('../assets/img/home/u15.png'), name: '浙江交易大楼'},
        {img: require('../assets/img/home/u16.png'), name: '杭州旅游民宿'},
      ],
      newsIndex: 0,
      newsData: [],
      newsList: [],
      newsId: "",
      danwei: [
        "浙江省建工集团有限责任公司",
        "浙江省一建建设集团有限公司",
        "浙江省二建建设集团有限公司",
        "浙江省三建建设集团有限公司",
        "新疆塔建三五九建工有限责任公司",
        "中国浙江建设国际集团有限公司",
      ],
      plateList: [
      ],
      plateData: [],
      plateIndex: 0,
      offsetLeft: 0, // 专题栏目的向左的偏移量
      scrollWidth: 0, // 无限滚动可滚动的宽度
      timer: null, // 滚动定时器
      page: 1,
      pageImg: [
        {img: require('../assets/img/home/u143.jpg'), url: 'http://www.cnzgc.com/Web/Hero/Index.aspx'},
        {img: require('../assets/img/home/u144.png'), url: 'http://www.cnzgc.com/News_List.aspx?ParentID=24&ClassID=240'},
        {img: require('../assets/img/home/u145.jpg'), url: 'https://wlxy.cnzgc.com/login'},
        {img: require('../assets/img/home/u146.jpg'), url: 'https://oa.cnzgc.com:8089/wui/index.html#/?logintype=1&_key=a04omc'},
        {img: require('../assets/img/home/u143.jpg'), url: 'http://www.cnzgc.com/Web/Hero/Index.aspx'},
        {img: require('../assets/img/home/u144.png'), url: 'http://www.cnzgc.com/News_List.aspx?ParentID=24&ClassID=240'},
        {img: require('../assets/img/home/u145.jpg'), url: 'https://wlxy.cnzgc.com/login'},
        {img: require('../assets/img/home/u146.jpg'), url: 'https://oa.cnzgc.com:8089/wui/index.html#/?logintype=1&_key=a04omc'}
      ]
    };
  },
  mounted() {
    this.getWidth = $(document.body).width();
    this.getList();
    this.getScrollWidth();
    window.onresize = () => {
      this.getScrollWidth();
    };
  },
  methods: {
    //获取导航栏信息 存储vuex
    async getList() {
      let data = {
        type: 0,
        siteId: sessionStorage.getItem("siteId"),
        // siteId: 'ST-20241124222158'
      };
      try {
        const response = await get("/con/category/listByType", data);
        response.resData.forEach((item) => {
          if (item.name == '新闻资讯') {
            this.newsData = item.children;
            this.newsId = item.children[0].id;
          }
        });
        response.resData.forEach((item) => {
          if (item.name == '板块业务') {
            this.plateList = item.children;
            this.plateId = item.children[0].id;
          }
        });
        this.getNews(this.newsId);
        this.getPlate(this.plateId)
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    },
    //新闻资讯请求
    async getNews(id) {
      let data = {
        id: id,
        currentPage: "1",
        pageSize: "5",
      };
      try {
        const response = await get("/con/content/pageByCategoryId", data);
        this.newsList = response.resData.result;
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    },
    //板块业务请求
    async getPlate(id) {
      let data = {
        id: id,
        currentPage: 1,
        pageSize:  10,
      };
      try {
        const response = await get("/con/content/pageByCategoryId", data);
        this.plateData = response.resData.result;
        // 处理响应数据
      } catch (error) {
        // 处理错误
      }
    },
    //板块业务鼠标移动
    handleMouseEnter(item, index) {
      this.plateIndex = index;
      this.getPlate(item.id);
    },
    //新闻资讯跳转
    newsBtn(item, index) {
      this.newsIndex = index;
      this.getNews(item.id);
    },
    //新闻资讯详情跳转
    articleBtn(item, index) {
      this.$router.push({
        path: '/Article',
        query: { id: item.id, title: item.title},
      });
    },
    /**获取新闻资讯容器宽度 */
    getScrollWidth() {
      let yiDong = this.pageImg.length
      clearInterval(this.timer);
      //总宽度 - 容器的宽度 = 可滚动的距离
      this.scrollWidth = this.$refs.column.clientWidth - this.$refs.columnList.clientWidth;

      if (this.page <= yiDong - 4) {
        this.timer = setInterval(() => {
          if (this.page  >= yiDong - 4) {
            // 重新滚动
            this.page = 1
            this.offsetLeft = 0;
          } else {
            // 偏移量+1
            this.page += 1
            this.offsetLeft -= 27;

          }
          // this.offsetLeft -= 27;
        }, 2000);
      } else {
        this.offsetLeft = 0;
      }
    },

    onScrollMouseenter() {
      // 清除滚动
      clearInterval(this.timer);
    },

    onScrollMouseleave() {
      // 开启滚动
      this.getScrollWidth()
    },
    leftShift() {
      this.offsetLeft += 27;
      if (this.offsetLeft > 0) {
        this.offsetLeft = 0;
      }
    },
    rightShift() {
      let yiDong = this.pageImg.length
      if (this.page  >= yiDong - 4) {
        this.page = 1
        this.offsetLeft = 0;
        return
      }
      this.page += 1
      this.offsetLeft -= 27;
    },
  },
};
</script>

<style lang='css' scoped>
.wrap {
  max-width: 1300px;
  margin: 30px auto 0 !important;
}

/**新闻 */
.news {
  padding-bottom: 30px;
  /* height: 300px; */
}

.news-left {
  height: 100%;
}

.news-center {
  height: 100%;
}
.news-cr-t {
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.news-title {
  width: 26%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #0000003a;
}
.news-title-active {
  width: 25%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  color: #004098;
  border: 1px solid #0000003a;
  border-top: 1px solid #004098;
  cursor: pointer;
}
.news-list-t {
  height: 160px;
  display: flex;
  justify-content: space-between;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #0000002c;
}
.news-list-t-l {
  width: 30%;
  height: 100%;
}
.news-list-t-l img {
  width: 100%;
  height: 100%;
}
.news-list-t-r {
  width: 68%;
  height: 100%;
}
.news-list-t-r h4{
  font-weight: bold;
}
.news-list-t-r h6{
  font-weight: bold;
  color: #0000008e;
}
.news-list-t-r div:nth-child(3){
  text-indent: 20px;
}
.news-l-r {
  width: 8px;
  height: 25px;
  background: #004098;
}
.news-l-text {
  margin-left: 10px;
  font-weight: bold;
  font-size: 24px;
  color: #000000b4;
}
.news-img {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-top: 20px;
}
.news-img img {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: all 1s;
  margin-top: 20px;
}
.news-img img:hover {
  transform: scale(1.2);
}
.news-b {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.news-b-list {
  width: 45%;
  height: 80px;
  display: flex;
  align-items: center;
}
.news-b-list-l {
  width: 50px;
  height: 50px;
  background: #0001be;
}
.news-b-list-l h4, .news-b-list-l>h6{
  display: block;
  color: #ffffff;
  margin: 1px;
  text-align: center;
  margin-top: 5px;
}
.news-b-list-r {
  width: 80%;
  height: 50px;
  margin-left: 10px;
}
.news-b-list-r h4 {
  margin: 0px !important;
}


/**广告 */
.bk {
  background: #F3F3F3;
  padding: 20px 0 50px 0;
}
.public {
  max-width: 1300px;
  margin-top: 10px;
  /* height: 150px; */
}
.column {
  position: relative;
  /* height: 200px; */
  overflow: hidden;
  display: flex;
}

.column-list {
  height: 100%;
  display: flex;
  transition: transform 0.3s;
}

.column-list-left {
  left: 10px;
}

.column-list-right {
  right: 10px;
}

.column-list-left,
.column-list-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  background: red;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  background: rgba(200, 200, 255, 0.3);
  color: #b1b1b1;
}

.column-list-item {
  flex-shrink: 0;
  margin: 0 10px;
  width: 25%;
  height: 240px;
  background: #ffffff;
}

.column-list-item:first-of-type {
  margin-left: 0;
}

.column-list-item:last-of-type {
  margin-right: 0;
}

.column-list-item-img {
  width: 100%;
  height: 78%;
}
.column-list-item-text {
  display: flex;
  height: 22%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}


/**轮播图 */
.swiper {
  margin: auto;
  overflow: hidden;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
  .news-title {
    width: 25%;
  }
  .news-title-active {
    width: 25%;
  }
  .news-center {
    margin-top: 20px;
  }
  .column {
    padding-left: 0px !important;
  }
  .links-list {
    display: block;
  }
  .links-a {
    width: 100%;
  }
}
</style>

<style>
.yuan {
  width: 5px;
  height: 5px;
  background: #004098;
  margin-right: 10px;
}
.cz1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cz2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cz3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cu {
  cursor: pointer;
}
</style>
